<!DOCTYPE html>
<html>

<head>
    <title>WEBRTC Demo</title>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <link href='./css/bootstrap.css' rel="stylesheet">
    <link href='./css/style.css' rel='stylesheet'>
    <link rel="stylesheet" href="../assets/css/pure-min.css">
    <link rel="stylesheet" href="../assets/css/baby-blue.css">
</head>

<body>
    <div id="input-container" class="container">

        <div class="login-box">
            <div class="form-group">
                <div class="hide">
                    <label for="sdkappid">SDKAPPID:&nbsp;</label>
                    <input class="form-control" id="sdkappid" type="text" value="1400037025" />
                </div>
                <label for="userId">用户名:</label>
                <input class="form-control" id="userId" type="text" value="" />
                <label for="room-number">房间号:</label>
                <input class="form-control" id="roomid" type="text" value="100913">
            </div>
            <button class="btn btn-default" type="button" onclick="detect()">屏幕分享插件检测</button>
            <br />
            <h5>分享源</h5>
            <label for=""><input id="screen" type="checkbox" value="screen" checked > <span>screen</span></label>
            <label for=""><input id="window" type="checkbox" value="window" checked> <span>window</span></label>
            <label for=""><input id="audio" type="checkbox" value="audio" checked> <span>audio</span></label>
            <label for=""><input id="tab" type="checkbox" value="tab" checked> <span>tab</span></label>

            <button class="btn btn-default" type="button" onclick="init()">初始化</button>
            <p>注意：如果房间已经存在，则加入房间</p>
        </div>
        <canvas id="clock"></canvas>

    </div>
    <!-- 登录  -->

    <!-- RTC  -->
    <div id="video-section" style="display: none">
        <button class="btn btn-default" type="button" onclick="connect()">进入房间</button>
        <button class="btn btn-default" type="button" onclick="getAudio()">只采集音频</button>
        <button class="btn btn-default" type="button" onclick="getScreen()">采集屏幕</button>
        <button class="btn btn-default" type="button" onclick="getCamera()">采集摄像头&音频</button>
        <button class="btn btn-default" type="button" onclick="startRTC('camera')">推摄像头</button>
        <button class="btn btn-default" type="button" onclick="startRTC('screen')">推屏幕采集</button>
        <button class="btn btn-default" type="button" onclick="startRTC('canvas')">push canvas</button>
        <canvas id="clock" style="display:none"></canvas>
        <br />
        <video id="screenVideo" controls autoplay muted style="width:400px"></video>
        <video id="cameraVideo" controls autoplay muted style="width:400px"></video>
        <audio id="pureAudio" autoplay style="width:400px"></audio>
        <!-- 登录  -->
        <div id="remote-video-wrap">

        </div>
    </div>
    </div>
    <!-- RTC  -->

    <!-- jquery Demo用到，WebRTCAPI不依赖 -->
    <script src="../assets/libs/jquery.min.js"></script>
    <script src="../assets/libs/vconsole.min.js"></script>
    <script>
        // var vConsole = new VConsole();
    </script>
    <!-- 引入WebRTCAPI ， 强烈建议使用如下的CDN方式引入 -->
    <!-- <script src="https://sqimg.qq.com/expert_qq/webrtc/2.5.3/WebRTCAPI.min.js"></script> -->
    <!-- demo 部分 -->
    <script src="../dist/WebRTCAPI.min.js"></script>
    <script>
        document.write('<script src="./js/index.js?v=' + new Date() + '" type="text/javascript"></scr' + 'ipt>')
    </script>
    <script>
        var _mtac = {
            "senseHash": 0
        };
        (function() {
            var mta = document.createElement("script");
            mta.src = "//pingjs.qq.com/h5/stats.js";
            mta.setAttribute("name", "MTAH5");
            mta.setAttribute("sid", "500538821");
            mta.setAttribute("cid", "500538834");
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(mta, s);
        })();
    </script>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-121844058-1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];

        function gtag() {
            dataLayer.push(arguments);
        }
        gtag('js', new Date());
        gtag('config', 'UA-121844058-1');
    </script>
</body>

</html>